<template>
  <el-form class="search-form" :model="book_id" label-width="90px" :inline="true" ref="ruleFormRef">
    <el-form-item label="图书编号">
      <el-input v-model="book_id" />
    </el-form-item>
    <el-form-item class="btns">
      <el-button :icon="ArrowLeft" @click="borrowBookById()">借出</el-button>
    </el-form-item>
  </el-form>

  <myTable class="table" :columnData="columnData" :tableData="tableData">
    <template #borrowing_dateData="{ rowData }">
      <span>{{ formatDate(rowData.row.borrowing_date) }}</span>
    </template>
    <template #return_dateData="{ rowData }">
      <span>{{ rowData.row.return_date ? formatDate(rowData.row.return_date) : '' }}</span>
    </template>
    <template #operateData="{ rowData }">
      <div v-if="!rowData.row.return_date">
        <el-button type="primary" plain @click="returnBookById(rowData)">
          归还
          <el-icon class="el-icon--right">
            <ArrowRight />
          </el-icon>
        </el-button>
      </div>
      <div v-else>
        <el-button type="success" :disabled="true">已归还</el-button>
      </div>
    </template>
  </myTable>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import myTable from '@/components/table/index.vue'
import { columnDataType, tableDataType } from '@/components/table/index.d'
import { getBorrowList, borrowBook, returnBook } from '@/request/api'
import { getCurrentTime, formatDate } from '@/utils/index'


const ruleFormRef = ref<FormInstance>()

onMounted(() => {
  getList()
  userId.value = sessionStorage.getItem('user_id')
})
const userId = ref(sessionStorage.getItem('user_id'))
const getList = () => {
  getBorrowList().then((res) => {
    console.log(res);
    tableData.list = res.data
  })
}

// 分页器相关参数
const currentPage = reactive({
  size: 10,
  current: 1,
  total: 100
})


// 表格
const columnData = reactive<columnDataType<any>[]>([
  {
    property: 'borrowing_id',
    label: '借阅编号',
  },
  {
    property: 'user_id',
    label: '用户编号',
  },
  {
    property: 'book_id',
    label: '图书编号',
  },
  {
    property: 'user.name',
    label: '用户名',
  },
  {
    property: 'book.title',
    label: '书名',
  },
  {
    property: 'borrowing_date',
    label: '借出时间',
    width: 220,
    customData: "borrowing_dateData"
  },
  {
    property: 'return_date',
    label: '归还时间',
    width: 220,
    customData: "return_dateData"
  },
  {
    property: 'operate',
    label: '操作',
    width: 150,
    fixed: 'right',
    customData: "operateData",
  }
])

// 表格
const tableData = reactive<tableDataType<any>>({
  list: [],
  needPaging: false,
  paging: {
    total: currentPage.total,
    currentPage: currentPage.current,
    changeFn: (val: number) => {
      console.log(val);

    },
    sizeFn: (val: number) => {
      console.log(val);

    }
  }
})


// 图书编号
const book_id = ref(undefined)

// 借书
const borrowBookById = () => {
  console.log('借出');
  const borrowBookParam = {
    user_id: userId.value,
    book_id: book_id.value,
    borrowing_date: getCurrentTime()
  }
  borrowBook(borrowBookParam).then((res: any) => {
    if (res.code === 200) {
      ElNotification({
        title: res.msg,
        type: 'success',
        duration: 1000
      })
      getList()
    } else {
      ElNotification({
        title: res.msg,
        type: 'error',
        duration: 1000
      })
    }
  }).catch((err) => {
    console.log(err);
  })
  book_id.value = undefined
}

// 还书
const returnBookById = (rowData: any) => {
  console.log(rowData, '归还');
  const returnBookParam = {
    borrowing_id: rowData.row.borrowing_id,
    book_id: rowData.row.book_id,
    return_date: getCurrentTime()
  }
  returnBook(returnBookParam).then((res: any) => {
    if (res.code === 200) {
      ElNotification({
        title: res.msg,
        type: 'success',
        duration: 1000
      })
      getList()
    } else {
      ElNotification({
        title: res.msg,
        type: 'error',
        duration: 1000
      })
    }
  }).catch((err) => {
    console.log(err);
  })
}

</script>

<style scoped>
.search-container {
  border-bottom: 3px solid rgb(245, 245, 245);
  margin-bottom: 30px;
}

.search-form {
  display: flex;
  align-items: center;
  height: 50px;
}

.table {
  border-top: 3px solid rgb(245, 245, 245);
}
</style>